<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>刘姝含的页面</title>
</head>
<body>
    <div class="box">
        <div class="box1">校园风光
            <div class="box1A">XLAO YUAN FENG GUANG</div>
        </div>
        <div class="box2"></div>
        <div class="box3">
            <div class="box3A"></div>
        </div>
        <div class="box4"></div>
    </div>
    <!-- <div class="b">123456</div> -->
</body>
<style>
    .box{
        width: 900px;
        height: 300px;
        background-color: rgb(23, 123, 157);
        /* float: left; */
        margin: auto;  
        /* 父容器设置相对定位，作为子元素绝对定位的参考 */
        position: relative;
    }
    .box1{
        width: 200px;
        height: 100px;
        background-color:rgb(153, 23, 23);
        padding :40px 0 0 20px;
        font-size: 20px;
        color: azure;
    }
    .box1A{
        width: 200px;
        height: 100px;
        padding :5px 0 0 3px;
        font-size: 10px;
        color: azure;
    }
    .box2{
        width: 200px;
        height: 160px;
        background-color:rgb(160, 174, 109);
        /* float: right;  */
        /* margin: auto;  居中 */
        background-image: url("1.jpg");
        background-size: cover;
    }
    .box3{
        width: 700px;
        height: 170px;
        background-color:rgb(75, 153, 23);
        position: absolute;
        top: 0;
        right: 0;
    }
    .box3A{
        width: 400px;
        height: 170px;
        background-color:rgb(72, 106, 158);
        background-image: url("2.jpg");
        background-size: cover;
    }
    .box4{
        width: 700px;
        height: 130px;
        background-color:rgb(159, 60, 143);
        position: absolute;
        top: 170px;
        right: 0;
    }
   
</style>
</html>